<template>
  <div class="littlebox">
    
    <!-- <bm-view class="map"> </bm-view> -->
    <baidu-map
      class="view"
      :ak="key"
      :center="center"
      :zoom="zoom"
      @ready="handler"
      scroll-wheel-zoom
    >
    <el-input v-model="keyword" class="searchcomplete"></el-input>
      <!-- <el-input v-model="keyword" class="searchcomplete"></el-input> -->
      <!-- <input v-model="keyword" class="searchcomplete" type="text"> -->

      <bm-local-search
        :keyword="keyword"
        :auto-viewport="true"
        class="map"
        @markersset="markersset"
        @infohtmlset="infohtmlset"
        :panel="false"
      ></bm-local-search>
      <div v-show="showResultFlag" class="search-result">
        <div
          v-for="(item, index) in searchResult"
          class="item"
          :key="index"
          @click="handleSelect(item)"
        >
          <p class="title">{{ item.title }}</p>
          <p class="address">{{ item.address }}</p>
        </div>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import bmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
import bmView from "vue-baidu-map/components/map/MapView.vue";
export default {
  name: "baidumap",
  data() {
    return {
      key: "r6qvYjuCYtTvcc1nEn1TiUeVoCbum5uX",
      center: { lng: 0, lat: 0 },
      zoom: 3,
      keyword: "",
      // 搜索结果面板
      showResultFlag: false,
      searchResult: [],
      clicknum:0,
      from:{
        address:"",
        title:"",
        lat:null,
        lng:null
      }
    };
  },
  components: {
    BaiduMap,
    bmLocalSearch,
    bmView,
  },
  mounted() {
    // this.handler()
  },
  methods: {
    handler() {
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    searchcomplete(data) {
      console.log(data);
    },
    //列表获取显示搜索框
    markersset(data) {
      // console.log(data);
      this.showResultFlag = true;
      this.searchResult = data;
      // this.showResultFlag = true;
      // this.searchResult = data;
      // data.forEach(item=>{
      //   item.marker.Mi.onclick=(ele)=>{
      //     console.log("ele");
      //   }
      // })
    },
    //点击标注
    infohtmlset(data) {
      // console.log(data);
      if(this.clicknum){
        // console.log(this.from,data.pointN.lat,data.pointN.lng);
        this.clicknum=0
        if(this.from.lat==data.pointN.lat&&this.from.lng==data.pointN.lng){
          // console.log(this.from);
          this.$emit('childMarker',this.from)
          this.clearfrom()
          return
        }
      }
      this.from={
        address:data.address,
        title:data.title,
        lat:data.pointN.lat,
        lng:data.pointN.lng
      }
      this.clicknum++
    },
    //清空from
    clearfrom(){
      this.from={
        address:"",
        title:"",
        lat:null,
        lng:null
      }
    },
    handleSelect(item) {
      // console.log(item);
      this.from={
        address:item.address,
        title:item.title,
        lat:item.pointN.lat,
        lng:item.pointN.lng
      }
      this.$emit('childMarker',this.from)
      this.clearfrom()
    },
  },
};
</script>

<style lang="less" scoped>
.littlebox {
  width: 100%;
  height: 100%;
  position: relative;
}
.view {
  width: 100%;
  height: 90%;
  margin-top: 10px;
}
.map {
  position: absolute;
  margin-top: -100%;
  margin-left: -80%;
}
.search-result {
  position: absolute;
  bottom: -400px;
  margin-top: 400px;
  // margin-left: -80%;
  background-color: #fff;
  padding: 0 32px;
  // border-radius: 24px;
  max-height: 400px;
  overflow: scroll;
  .item:hover{
    cursor:pointer; 
    background-color: #409EFF;
    span{
      color: #fff;
    }
  }
  .item {
    border-bottom: 1px solid #ebeef2;
    // padding: 32px 0;
    &:last-child {
      border-bottom: none;
    }
    .title {
      // font-size: 28px;
      font-weight: 600;
      color: #313233;
    }
    .address {
      // font-size: 24px;
      font-weight: 400;
      color: #9ca5b3;
      margin-top: 8px;
    }
  }
}
</style>